Google Charts আপনাকে চার্টের সঙ্গে ইন্টারঅ্যাকটিভ ভাবে কাজ করার সুযোগ দেয়। আপনি hover এবং click ইভেন্ট যোগ করে ব্যবহারকারীদের সাথে ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে পারেন। এই ইভেন্টগুলোর মাধ্যমে আপনি চার্টের উপর মাউস মুভমেন্ট বা ক্লিকের মাধ্যমে ডেটা পরিবর্তন বা কিছু অতিরিক্ত তথ্য প্রদর্শন করতে পারেন।
১. Hover Event যোগ করা
Hover ইভেন্ট ব্যবহারকারীদের চার্টের ওপর মাউসের কার্সর রাখলে তথ্য প্রদর্শন করতে সাহায্য করে। Google Charts এ hover ইভেন্ট যোগ করার মাধ্যমে আপনি নির্দিষ্ট ডেটা পয়েন্টের বিস্তারিত তথ্য দেখাতে পারেন।
কোড উদাহরণ: Hover ইভেন্ট ব্যবহার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Event Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
var options = {
title: 'Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: { position: 'none' }
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
// Hover event listener
google.visualization.events.addListener(chart, 'onmouseover', function(e) {
var selectedItem = data.getValue(e.row, e.column);
alert('You hovered over: ' + selectedItem);
});
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Chart with Hover Event</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Hover ইভেন্ট যুক্ত করা:
google.visualization.events.addListener()ফাংশন ব্যবহার করে, চার্টে onmouseover ইভেন্ট যোগ করা হয়েছে। যখন ব্যবহারকারী চার্টের উপর মাউস রাখেন, তখন একটি alert শো হবে যা উক্ত সেলের মান দেখাবে। - Chart Creation: এই উদাহরণে একটি Bar Chart তৈরি করা হয়েছে, যা বছরভিত্তিক বিক্রয় প্রদর্শন করে।
২. Click Event যোগ করা
Click ইভেন্ট ব্যবহারকারীর ক্লিক করার মাধ্যমে নির্দিষ্ট ডেটা বা চার্টের উপাদান সম্পর্কিত তথ্য প্রদান করতে সাহায্য করে। আপনি এই ইভেন্টের মাধ্যমে বিভিন্ন অ্যাকশন গ্রহণ করতে পারেন, যেমন ডেটা পরিবর্তন বা ডেটা বিস্তারিত প্রদর্শন।
কোড উদাহরণ: Click ইভেন্ট ব্যবহার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click Event Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
var options = {
title: 'Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: { position: 'none' }
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
// Click event listener
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
if (selection.length > 0) {
var selectedItem = selection[0];
var year = data.getValue(selectedItem.row, 0);
var sales = data.getValue(selectedItem.row, 1);
alert('You clicked on ' + year + ' with Sales: ' + sales);
}
});
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Chart with Click Event</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Click ইভেন্ট যুক্ত করা:
google.visualization.events.addListener()ফাংশন ব্যবহার করে select ইভেন্ট যোগ করা হয়েছে। যখন ব্যবহারকারী চার্টের একটি সেলে ক্লিক করবেন, তখন একটি alert প্রদর্শিত হবে, যা সেলটির বছর এবং বিক্রয় তথ্য দেখাবে। - Chart Creation: এখানে একটি Bar Chart তৈরি করা হয়েছে, যেখানে বিক্রয়ের ডেটা বছরভিত্তিক প্রদর্শিত হয়।
৩. Hover এবং Click ইভেন্ট একসাথে ব্যবহার
একই চার্টে আপনি Hover এবং Click ইভেন্ট উভয়ই ব্যবহার করতে পারেন। এটি ব্যবহারকারীর ইন্টারঅ্যাকশনকে আরও আরও ইন্টারেক্টিভ এবং তথ্যপূর্ণ করে তোলে।
কোড উদাহরণ: Hover এবং Click ইভেন্ট একসাথে ব্যবহার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover and Click Event Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
var options = {
title: 'Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: { position: 'none' }
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
// Hover event listener
google.visualization.events.addListener(chart, 'onmouseover', function(e) {
var selectedItem = data.getValue(e.row, e.column);
console.log('Hovered over: ' + selectedItem);
});
// Click event listener
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
if (selection.length > 0) {
var selectedItem = selection[0];
var year = data.getValue(selectedItem.row, 0);
var sales = data.getValue(selectedItem.row, 1);
alert('You clicked on ' + year + ' with Sales: ' + sales);
}
});
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Chart with Hover and Click Events</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
উপসংহার
Hover এবং Click ইভেন্ট গুগল চার্টে ব্যবহারকারীর ইন্টারঅ্যাকশনকে আরও শক্তিশালী এবং তথ্যপূর্ণ করে তোলে। Hover ইভেন্টের মাধ্যমে আপনি মাউসের কার্সরের উপর কোন সেলে গেলে ডেটা দেখতে পারেন, এবং Click ইভেন্টের মাধ্যমে ব্যবহারকারী যখন কোনো সেলে ক্লিক করবে, তখন সেলটির বিস্তারিত তথ্য প্রদর্শিত হবে। এই ইভেন্টগুলো বিভিন্ন ধরনের চার্টে (যেমন Bar Chart, Pie Chart, Line Chart) ব্যবহার করা যায়, যা চার্টের কার্যকারিতা বাড়ায় এবং ব্যবহারকারীর জন্য ডেটা উপস্থাপন সহজতর করে তোলে।
Read more
